<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="checkbox" name="" id="" v-model="alltype" @change="changeType"/>全选
        <!-- 水果列表 -->
        <div v-for="(item,index) in fruitArr">
            <input type="checkbox" name="" id="" :value="item.id" v-model="checkall">
            {{item.name}}
        </div> 
    </div>

    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                alltype:false, //全选的状态
                fruitArr:[
                    {"id": 1, "name":"苹果"},
                    {"id": 2, "name":"梨子"},
                    {"id": 3, "name":"椰子"},
                    {"id": 4, "name":"李子"},
                ],
                checkall:[] //将 选中的input框的id 添加到数组中
            },
            methods:{
                changeType:function(){
                    console.log(this.alltype);
                    //通过  alltype 的状态 ，设置 下面的4个 input框的选中状态
                    if(this.alltype){ //true   下面的4个 input框都选中
                        console.log(38);
                        this.fruitArr.forEach(item =>{
                            console.log(item.id);
                            this.checkall.push(item.id);
                        });
                    }else{ //false  下面的4个 input框都不选中
                        console.log(43);
                        this.checkall = [];
                    }
                }
            }
        })
    </script>
</body>
</html>